<template>
    <lay-tab type="brief" v-model="current_tab" @change="changeTab">
        <lay-tab-item title="各地区资源分布" id="1">
            <lay-row space="10">
                <lay-col sm="6" xs="24">
                    <lay-row space="10">
                        <lay-row space="10">
                            <lay-col md="24" sm="24" xs="12">
                                <div class="city-row">广西壮族自治区</div>
                            </lay-col>
                        </lay-row>
                        <lay-col sm="12" xs="6" v-for="city in citys" :key="city.code">
                            <div class="city-row">{{ city.name }}</div>
                        </lay-col>
                    </lay-row>
                </lay-col>
                <lay-col sm="18" xs="24">
                    <div class="map-container" ref="mapRef"></div>
                </lay-col>
            </lay-row>
        </lay-tab-item>

        <lay-tab-item title="选项二" id="2">
            <div ref="chartRef" class="map-container"></div>
        </lay-tab-item>
    </lay-tab>
</template>


<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import * as echarts from 'echarts'
import axios from 'axios';

const citys = [{
    name: '南宁市',
    code: 4501
}, {
    name: '柳州市',
    code: 4502
}, {
    name: '桂林市',
    code: 4503
}, {
    name: '梧州市',
    code: 4504
}, {
    name: '北海市',
    code: 4505
}, {
    name: '防城港市',
    code: 4506
}, {
    name: '钦州市',
    code: 4507
}, {
    name: '贵港市',
    code: 4508
}, {
    name: '玉林市',
    code: 4509
}, {
    name: '百色市',
    code: 4510
}, {
    name: '贺州市',
    code: 4511
}, {
    name: '河池市',
    code: 4512
}, {
    name: '来宾市',
    code: 4513
}, {
    name: '崇左市',
    code: 4514
}]

// ================================================================================
// 获取 DOM 元素的引用（用于初始化图表）
const mapRef = ref(null)
// 存储 ECharts 实例
let mapInstance = ref(null)

// 初始化地图的方法
const initMapChart = () => {
    if (mapRef.value) {
        // 初始化 echarts 实例
        mapInstance = echarts.init(mapRef.value)
        axios.get('https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=450000_full').then(response => {

            // 注册地图(数据放在axios返回对象的data中哦)
            echarts.registerMap('GX', response.data);

            const mapData = [
                { name: '南宁市', value: 511111 },
                { name: '崇左市', value: 22221 },
                { name: '柳州市', value: 33333 },
                { name: '来宾市', value: 22231 },
                { name: '桂林市', value: 44441 },
                { name: '梧州市', value: 555525 },
                { name: '贺州市', value: 162475 },
                { name: '玉林市', value: 65454 },
                { name: '贵港市', value: 77771 },
                { name: '百色市', value: 88884 },
                { name: '钦州市', value: 99995 },
                { name: '河池市', value: 1001 },
                { name: '北海市', value: 122222 },
                { name: '防城港市', value: 333332 },
            ]
            // 提取所有的 value 值
            const values = mapData.map(item => item.value);
            // 计算最小值和最大值
            const minValue = Math.min(...values);
            const maxValue = Math.max(...values);

            // 配置项
            const option = {
                padding: [5, 10],
                height: '99%',
                // width: '100%',
                backgroundColor: '#f5f5f5', // 画布背景颜色
                visualMap: {
                    min: minValue,
                    max: maxValue,
                    realtime: false,
                    calculable: true,
                    // orient: 'horizontal',
                    inRange: {
                        // color: ['#66c2a5', '#fc8d62']
                        color: ['lightskyblue', 'yellow', '#66c2a5']
                    }
                },
                title: {
                    left: 'left',
                    text: '  资源分布图-广西'
                },
                roam: true,  // 是否开启缩放
                scaleLimit: { min: 0.9, max: 3 }, // 缩放限制
                tooltip: {},  // 配置提示框，有这个配置项即可
                series: [
                    {
                        name: '广西地图',
                        type: 'map',
                        map: 'GX',  // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
                        zoom: 1.2,

                        label: {
                            show: true,
                            position: 'outside',
                            fontSize: 12,
                            lineHeight: 14,
                            formatter: function (params) {
                                // params.name: 地区名, params.value: 数值
                                return params.name + '\n' + params.value + ' 万';
                            }
                        },
                        data: mapData,
                        edges: [
                            {
                                source: '南宁市',
                                target: '崇左市'
                            },
                            {
                                source: '崇左市',
                                target: '柳州市'
                            },
                            {
                                source: '柳州市',
                                target: '来宾市'
                            }]
                    },

                ]
            };
            // 使用配置项渲染图表
            mapInstance.setOption(option);
            // // 隐藏 loading 动画
            // mapInstance.hideLoading();
            // 主动触发一次 resize，确保地图显示
            mapInstance.resize();
        }).catch(error => {
            console.error('获取资源列表失败:', error);

        });

    }
}

// ================================================================================
// 获取 DOM 元素的引用（用于初始化图表）
const chartRef = ref(null)
// 存储 ECharts 实例
let chartInstance = ref(null)

var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
    xAxisData.push('A' + i);
    data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
    data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}

// 初始化图表的方法
const initChart = () => {
    if (chartRef.value) {
        // 初始化 echarts 实例
        chartInstance = echarts.init(chartRef.value)
        // 配置项
        const option = {
            // width: '100%',
            // height: '100%',
            title: {
                text: 'Bar Animation Delay'
            },
            legend: {
                data: ['bar', 'bar2']
            },
            toolbox: {
                // y: 'bottom',
                feature: {
                    magicType: {
                        type: ['stack']
                    },
                    dataView: {},
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            tooltip: {},
            xAxis: {
                data: xAxisData,
                splitLine: {
                    show: false
                }
            },
            yAxis: {},
            series: [
                {
                    name: 'bar',
                    type: 'bar',
                    data: data1,
                    emphasis: {
                        focus: 'series'
                    },
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                },
                {
                    name: 'bar2',
                    type: 'bar',
                    data: data2,
                    emphasis: {
                        focus: 'series'
                    },
                    animationDelay: function (idx) {
                        return idx * 10 + 100;
                    }
                }
            ],
            animationEasing: 'elasticOut',
            animationDelayUpdate: function (idx) {
                return idx * 5;
            }
        };
        // 使用配置项渲染图表
        chartInstance.setOption(option)
        // 主动触发一次 resize，确保地图显示
        chartInstance.resize();
    }
}


const current_tab = ref('1')
// lay-tab-item 点击事件处理
const changeTab = function (id) {
    console.log("当前值:" + id)
    if (id === "1") {
        // 处理选项一的逻辑
        initMapChart() // 切换到“各地区资源分布”时重新初始化地图
    } else if (id === "2") {
        // 处理选项二的逻辑
        nextTick(() => {  //在 tab 切换到选项二后，使用 nextTick 等待 DOM 渲染完成再初始化 ECharts。
            initChart()
            chartInstance.resize()
        })
    }
}

// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
    console.log('resize===================')
    mapInstance?.resize()
}

// 组件挂载后执行初始化
onMounted(() => {
    initMapChart()
    initChart()
    // 监听窗口大小变化事件以支持响应式
    window.addEventListener('resize', resizeChart)
})

// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeChart)
    mapInstance?.dispose() // 销毁 echarts 实例
})


</script>

<style scoped>
.map-container {
    /* width: 700px; */
    min-height: 500px;
    margin: 0 5px;
    border: 1px solid #f1f1f1;
    /* box-shadow: 1px 2px 5px rgba(57, 61, 73, 0.1); */
    border-radius: 10px;
    overflow: hidden;
}

.city-row {
    /* padding: 10px 10px; */
    border-bottom: 1px solid #f1f1f1;
    background-color: var(--global-primary-color);
    text-align: center;
    margin: 4px 4px 4px 10px;
    padding: 10px 0px;
    color: #fff;
    border-radius: 5px;
}

.city-row:hover {
    /* background-color: darken(var(--global-primary-color), 5%); */
    cursor: pointer;
    background-color: var(--global-checked-color);
}
</style>
